<template>
	<view>
		<view class="sk-bounce" :style="{width: size + 'px', height: size + 'px'}">
		  <view class="sk-bounce-dot" :style="{backgroundColor: color}"></view>
		  <view class="sk-bounce-dot" :style="{backgroundColor: color}"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"loading",
		props: {
			size: {
			  type: Number,
			  default: 15
			},
			color: {
			  type: String,
			  default: "#f7b10a"
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>

	.sk-bounce {
	  position: relative;
	}

	.sk-bounce-dot {
	  width: 100%;
	  height: 100%;
	  border-radius: 50%;
	  opacity: 0.6;
	  position: absolute;
	  top: 0;
	  left: 0;
	  animation: sk-bounce 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); 
	}

	.sk-bounce-dot:nth-child(2) { animation-delay: -1.0s; }

	@keyframes sk-bounce {
	  0%, 100% {
		transform: scale(0);
	  } 45%, 55% {
		transform: scale(1); 
	  } 
	}

</style>